<template>
  <inline-Modal
    :visible="visible"
    title="查看"
    :showOk="false"
    @cancel="handelCancel()"
  >
    <div class="procedure-detail-container custom-collapse-container">
      <a-collapse v-model="activeKey">
        <a-collapse-panel key="1" :show-arrow="false">
          <!-- 自定义头部左边 -->
          <template slot="header">
            <div @click.stop class="customize-text" header="基本信息"></div>
          </template>
          <!-- 自定义头部右边边 -->
          <template slot="extra">
            <div class="customize-extra">
              {{ activeKey.includes("1") ? "收起" : "展开" }}
              <div class="icon" :class="[activeKey.includes('1') && 'active']">
                <a-icon type="caret-down" />
              </div>
            </div>
          </template>
          <div class="baseInfo-container">
            <a-form-model ref="form" :model="baseInfo">
              <a-row>
                <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" :xxl="8">
                  <a-form-model-item label="标段名称">
                    <a-input v-model="baseInfo.orgName" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" :xxl="8">
                  <a-form-model-item label="单位工程">
                    <a-input v-model="baseInfo.unitWorks" disabled />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="[30, 0]">
                <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
                  <div class="unit-item">
                    <div class="subtitle" header="●">分部工程</div>
                    <div class="content">
                      <a-row :gutter="0">
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                          class="percent"
                        >
                          <a-form-model-item label="报验进度">
                            <a-input
                              v-model="baseInfo.divisionalWorksRatio"
                              disabled
                            />
                          </a-form-model-item>
                          <span style="margin-left: 10px">%</span>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="已完成">
                            <a-input
                              v-model="baseInfo.divisionalWorksComplete"
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="未完成">
                            <a-input
                              :value="
                                subNumber(
                                  baseInfo.divisionalWorksNumber,
                                  baseInfo.divisionalWorksComplete
                                )
                              "
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                </a-col>
                <a-col
                  v-if="baseInfo.subDivisionalWorksNumber > 0"
                  :xs="24"
                  :sm="24"
                  :md="12"
                  :lg="12"
                  :xl="12"
                  :xxl="12"
                >
                  <div class="unit-item">
                    <div class="subtitle" header="●">子分部工程</div>
                    <div class="content">
                      <a-row :gutter="0">
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                          class="percent"
                        >
                          <a-form-model-item label="报验进度">
                            <a-input
                              v-model="baseInfo.subDivisionalWorksRatio"
                              disabled
                            />
                          </a-form-model-item>
                          <span style="margin-left: 10px">%</span>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="已完成">
                            <a-input
                              v-model="baseInfo.subDivisionalWorksComplete"
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="未完成">
                            <a-input
                              :value="
                                subNumber(
                                  baseInfo.subDivisionalWorksNumber,
                                  baseInfo.subDivisionalWorksComplete
                                )
                              "
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
                  <div class="unit-item">
                    <div class="subtitle" header="●">分项工程</div>
                    <div class="content">
                      <a-row :gutter="0">
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                          class="percent"
                        >
                          <a-form-model-item label="报验进度">
                            <a-input
                              v-model="baseInfo.itemWorksRatio"
                              disabled
                            />
                          </a-form-model-item>
                          <span style="margin-left: 10px">%</span>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="已完成">
                            <a-input
                              v-model="baseInfo.itemWorksComplete"
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="未完成">
                            <a-input
                              :value="
                                subNumber(
                                  baseInfo.itemWorksNumber,
                                  baseInfo.itemWorksComplete
                                )
                              "
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                </a-col>
                <a-col
                  v-if="baseInfo.subItemWorksNumber > 0"
                  :xs="24"
                  :sm="24"
                  :md="12"
                  :lg="12"
                  :xl="12"
                  :xxl="12"
                >
                  <div class="unit-item">
                    <div class="subtitle" header="●">子分项工程</div>
                    <div class="content">
                      <a-row :gutter="0">
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                          class="percent"
                        >
                          <a-form-model-item label="报验进度">
                            <a-input
                              v-model="baseInfo.subItemWorksRatio"
                              disabled
                            />
                          </a-form-model-item>
                          <span style="margin-left: 10px">%</span>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="已完成">
                            <a-input
                              v-model="baseInfo.subItemWorksComplete"
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="未完成">
                            <a-input
                              :value="
                                subNumber(
                                  baseInfo.subItemWorksNumber,
                                  baseInfo.subItemWorksComplete
                                )
                              "
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
                  <div class="unit-item">
                    <div class="subtitle" header="●">工序</div>
                    <div class="content">
                      <a-row :gutter="0">
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                          class="percent"
                        >
                          <a-form-model-item label="报验进度">
                            <a-input
                              v-model="baseInfo.procedureItemRatio"
                              disabled
                            />
                          </a-form-model-item>
                          <span style="margin-left: 10px">%</span>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="已完成">
                            <a-input
                              v-model="baseInfo.procedureItemComplete"
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="未完成">
                            <a-input
                              :value="
                                subNumber(
                                  baseInfo.procedureItemNumber,
                                  baseInfo.procedureItemComplete
                                )
                              "
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </a-form-model>
          </div>
        </a-collapse-panel>
        <a-collapse-panel key="2" :show-arrow="false">
          <!-- 自定义头部左边 -->
          <template slot="header">
            <div @click.stop class="customize-text" header="工程信息"></div>
          </template>
          <!-- 自定义头部右边边 -->
          <template slot="extra">
            <div class="customize-extra">
              {{ activeKey.includes("2") ? "收起" : "展开" }}
              <div class="icon" :class="[activeKey.includes('2') && 'active']">
                <a-icon type="caret-down" />
              </div>
            </div>
          </template>
          <div class="engineering-container">
            <div class="operate">
              <a-select
                v-model="conditions.completeStatus"
                placeholder="请选择状态"
                allowClear
                :getPopupContainer="selectContainer"
                @change="search()"
              >
                <a-select-option value="0"> 未开始 </a-select-option>
                <a-select-option value="1"> 审批中 </a-select-option>
                <a-select-option value="2"> 已完成 </a-select-option>
              </a-select>
              <a-select
                v-model="conditions.status"
                placeholder="是否是隐蔽工程"
                allowClear
                :getPopupContainer="selectContainer"
                @change="search()"
              >
                <a-select-option value="0"> 普通工程 </a-select-option>
                <a-select-option value="1"> 隐蔽工程 </a-select-option>
              </a-select>
              <a-button type="primary" @click="search()"> 查询 </a-button>
            </div>
            <div class="content">
              <div class="tree-container">
                <a-empty v-if="treeData.length == 0" />
                <a-tree
                  v-else
                  show-icon
                  :default-expand-all="true"
                  :expanded-keys="expandedKeys"
                  :auto-expand-parent="autoExpandParent"
                  :selected-keys="selectedKeys"
                  :tree-data="treeData"
                  :replaceFields="{
                    children: 'child',
                    title: 'name',
                    key: 'code',
                  }"
                  @expand="onExpand"
                  @select="onSelect"
                >
                  <!-- 标题 -->
                  <template
                    slot="title"
                    slot-scope="{ name, complete, total, child }"
                  >
                    <span
                      v-if="child"
                      :title="
                        name + '(' + (complete || 0) + '/' + (total || 0) + ')'
                      "
                    >
                      {{ name }} ({{ complete || 0 }}/{{ total || 0 }})
                    </span>
                    <span v-else :title="name">{{ name }}</span>
                  </template>
                  <!-- 文件夹图标 -->
                  <template slot="custom" slot-scope="{ expanded, child }">
                    <a-icon
                      :type="
                        child && child.length > 0
                          ? expanded
                            ? 'folder-open'
                            : 'folder'
                          : 'file'
                      "
                      :class="
                        child && child.length > 0 ? 'folder-icon' : 'file-icon'
                      "
                    />
                  </template>
                </a-tree>
              </div>
              <div class="table-container">
                <div class="list">
                  <vxe-table
                    v-if="isPage"
                    ref="xTable"
                    height="99%"
                    align="center"
                    show-overflow
                    show-header-overflow
                    border="inner"
                    :data="tableData"
                    :column-config="{ resizable: true }"
                    size="small"
                    :loading="loading"
                  >
                    <vxe-column type="seq" width="80" title="序号"></vxe-column>
                    <vxe-column field="divisionalWorks" title="分部工程">
                    </vxe-column>
                    <vxe-column field="subDivisionalWorks" title="子分部工程">
                    </vxe-column>
                    <vxe-column field="itemWorks" title="分项工程">
                    </vxe-column>
                    <vxe-column
                      field="positionKey"
                      title="子分项工程（实际施工部位）"
                    >
                    </vxe-column>
                    <vxe-column field="procedureItem" title="工序">
                    </vxe-column>
                    <vxe-column title="状态" width="100">
                      <template #default="{ row }">
                        <div
                          class="status-text"
                          :class="[checkStatusClass(row)]"
                        >
                          {{ row.completeStatusDesc }}
                        </div>
                      </template>
                    </vxe-column>
                    <vxe-column title="报验/完成时间" width="200">
                      <template #default="{ row }">
                        {{ row.applyTime }} / {{ row.completeTime }}
                      </template>
                    </vxe-column>
                    <vxe-column
                      field="operate"
                      width="280"
                      title="操作"
                      fixed="right"
                      align="left"
                    >
                      <template #default="{ row }">
                        <div class="text-button-group">
                          <a-button
                            type="link"
                            @click="gotoStartInspection(row)"
                            :disabled="row.inspect ? false : true"
                          >
                            报验
                          </a-button>
                          <a-button
                            type="link"
                            @click="gotoDetail(row)"
                            :disabled="row.detail ? false : true"
                          >
                            查看
                          </a-button>
                          <a-button
                            type="link"
                            @click="gotoFlow(row)"
                            :disabled="row.flowChart ? false : true"
                          >
                            流程图
                          </a-button>
                          <a-button
                            type="link"
                            @click="gotoApprovalRecord(row)"
                            :disabled="row.approveRecord ? false : true"
                          >
                            审批记录
                          </a-button>
                        </div>
                      </template>
                    </vxe-column>
                  </vxe-table>
                </div>
                <div class="pager-container">
                  <vxe-pager
                    size="small"
                    background
                    :current-page.sync="pager.page"
                    :page-size.sync="pager.pageSize"
                    :total="pager.total"
                    :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
                    :page-sizes="[20, 50, 100, 500]"
                    @page-change="paginationChange"
                  >
                    <template #left>
                      <div class="vxe-pager-left-tip-container">
                        共<span>{{ pager.total }}</span
                        >条
                      </div>
                    </template>
                  </vxe-pager>
                </div>
              </div>
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>

    <!-- 编辑弹窗-->
    <edit-form
      ref="createModal"
      :visible="editModalVisible"
      :loading="confirmLoading"
      :url="url"
      requestMethod="post"
      :tableDataType="tableDataType"
      @cancel="editModalCancel()"
      @ok="editModalOk()"
      :customFooter="modalFooter"
    />

    <flowChat ref="flowChatForm"></flowChat>
    <comment-modal ref="commentModal"></comment-modal>
  </inline-Modal>
</template>

<script>
import editForm from "@/pages/form/formPreview/edit.vue";
import commentModal from "@/pages/workflow/oaLeave/comment.vue";
import flowChat from "@/pages/workflow/apiFlowableTask/myMission/flowChat.vue";
import { addAttributeByKey } from "@/utils/index.js";
import {
  getUnitWordDetail,
  getGCXXTreeData,
  getGCXXList,
} from "@/api/progressManage";
export default {
  components: {
    editForm,
    commentModal,
    flowChat,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    soucre: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      activeKey: ["1", "2"],
      //基本信息
      baseInfo: {},
      //工程信息
      conditions: {
        //状态
        completeStatus: undefined,
        //是否隐蔽工程
        status: undefined,
      },
      //工程树
      treeData: [],
      selectedKeys: [],
      selectedCode: "",
      expandedKeys: [],
      autoExpandParent: true,
      serachTreeKeys: [],
      //列表
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
      tableUuid: "",
      //编辑
      editModalVisible: false,
      confirmLoading: false,
      url: {
        update: "/form/formDatabase/formUpdate",
      },
      tableDataType: "",
      modalFooter: {},
      isPage: true,
    };
  },
  methods: {
    //详情禁用
    dealData(disabled = false, formJsonData = "{}") {
      let dealData = JSON.parse(formJsonData);
      let { list = [], config } = dealData;
      config.hideRequiredMark = true;
      list.forEach((v) => {
        let { columns = [], options } = v;
        if (options) {
          options.disabled = disabled;
        }
        columns.forEach((item) => {
          let { list = [] } = item;
          list.forEach((c) => {
            let { options } = c;
            options.disabled = disabled;
          });
        });
      });
      return JSON.stringify(dealData);
    },
    loadDataJson() {
      return new Promise((reslove) => {
        this.$post("/form/formBasicConfigure/getDetailByUuid", {
          uuid: this.tableUuid,
        })
          .then((res) => {
            this.tableDataType = res.formDatabase?.type || "";
            reslove(res.formDesign.designJson);
          })
          .catch((_) => {
            reslove({});
          });
      });
    },
    // 子分项为空 BC812BF3F31540EA9BCBF0E823F75FCB
    // 子分项不为空 CE80001360F143A88C3E92B9925D0A5E
    //开始报验
    async gotoStartInspection(row) {
      this.modalFooter = {};
      let { subItemWorks, uuid } = row;
      if (subItemWorks) {
        //子分项不为空
        this.tableUuid = "CE80001360F143A88C3E92B9925D0A5E";
      } else {
        // 子分项为空
        this.tableUuid = "BC812BF3F31540EA9BCBF0E823F75FCB";
      }
      this.editModalVisible = true;
      let formJsonData = await this.loadDataJson(this.tableUuid);
      let { editApiUrl } = JSON.parse(formJsonData)?.config ?? {};
      this.url.update = editApiUrl ?? "/form/formDatabase/formSave";
      this.$refs.createModal.title = "编辑";
      this.$refs.createModal.loading = true;
      this.$post("/form/formDatabase/formGetDetail", {
        uuid: uuid,
        formUuid: this.tableUuid,
      }).then((res) => {
        this.$refs.createModal.loadData(
          this.tableUuid,
          "edit",
          formJsonData,
          res
        );
      });
    },
    //查看
    async gotoDetail(row) {
      this.modalFooter = { footer: null };
      let { uuid } = row;
      this.tableUuid = "CE80001360F143A88C3E92B9925D0A5E";
      this.editModalVisible = true;
      let formJsonData = await this.loadDataJson(this.tableUuid);
      this.$refs.createModal.title = "详情";
      this.$refs.createModal.loading = true;
      this.$post("/form/formDatabase/formGetDetail", {
        uuid: uuid,
        formUuid: this.tableUuid,
      }).then((res) => {
        this.$refs.createModal.loadData(
          this.tableUuid,
          "edit",
          this.dealData(true, formJsonData),
          res
        );
      });
    },
    //编辑确定
    editModalOk() {
      this.editModalVisible = false;
      this.getTableData();
    },
    //编辑取消
    editModalCancel() {
      this.editModalVisible = false;
    },
    //流程图
    gotoFlow(record) {
      this.$post("/workflow/oaLeave/clickFlowChart", {
        uuid: record.uuid,
      }).then((res) => {
        if (res.statusCode != 300) {
          const jsonData = res;
          this.$refs.flowChatForm.loadData(
            jsonData,
            jsonData.lists.actDeModelId,
            jsonData.lists.actDeModelKey,
            jsonData.lists.actDeModelName,
            jsonData.lists.flowDesign,
            record
          );
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //审批记录
    gotoApprovalRecord(record) {
      this.$refs.commentModal.getCommentList(record.uuid);
    },

    subNumber(total = 0, complete = 0) {
      let unNumber = 0;
      unNumber = total - complete;
      if (unNumber <= 0) {
        unNumber = 0;
      }
      return unNumber;
    },

    search() {
      this.pager.page = 1;
      this.getTreeData();
      this.getTableData();
    },

    //查询页面所有数据
    getData() {
      Promise.all([this.getDatail(), this.getTreeData(), this.getTableData()])
        .then((res) => {})
        .catch((_) => {})
        .finally((_) => {});
    },

    //查询详情
    getDatail() {
      let { tenantCode, orgCode, unitWorks = "" } = this.soucre;
      return new Promise((resolve, reject) => {
        getUnitWordDetail({ tenantCode, orgCode, unitWorks })
          .then((res) => {
            let { data } = res;
            this.baseInfo = data || {};
            resolve();
          })
          .catch((_) => {
            this.baseInfo = {};
            reject();
          })
          .finally((_) => {});
      });
    },

    //查询工程信息树
    getTreeData() {
      let { tenantCode, orgCode, unitWorks } = this.soucre;
      let { completeStatus = "", status = "" } = this.conditions;
      return new Promise((resolve, reject) => {
        getGCXXTreeData({
          tenantCode,
          orgCode,
          unitWorks,
          completeStatus,
          status,
        })
          .then((res) => {
            let { data } = res;
            this.treeData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              data || [],
              "child"
            );
            resolve();
          })
          .catch((_) => {
            this.treeData = [];
            reject();
          })
          .finally((_) => {});
      });
    },
    //树展开事件
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    //树选择事件
    onSelect(selectedKeys, ev) {
      let { code, id } = ev.node.dataRef;
      this.selectedKeys = selectedKeys;
      if (selectedKeys.length == 0) {
        this.selectedCode = "";
        this.serachTreeKeys = [];
      } else {
        this.serachTreeKeys = [id];
        this.selectedCode = code;
      }
      this.pager.page = 1;
      this.getTableData();
    },

    //查询列表
    getTableData() {
      this.isPage = false;
      this.loading = true;
      let { tenantCode, orgCode, unitWorks } = this.soucre;
      let { completeStatus = "", status = "" } = this.conditions;
      let { page, pageSize } = this.pager;
      let { serachTreeKeys, selectedCode } = this;
      return new Promise((resolve, reject) => {
        getGCXXList({
          page,
          pageSize,
          tenantCode,
          orgCode,
          unitWorks,
          completeStatus,
          status,
          code: selectedCode,
          id: serachTreeKeys.toString(),
        })
          .then((res) => {
            let { data } = res;
            this.tableData = data?.rows ?? [];
            this.pager.total = data?.totalCount ?? 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.isPage = true;
            this.loading = false;
          });
      });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
    },
    handelCancel() {
      this.$emit("cancel");
    },

    //校验状态className
    checkStatusClass(row) {
      let { completeStatusDesc } = row;
      switch (completeStatusDesc) {
        case "已完成":
          return "normal";

        case "未开始":
          return "cancel";

        default:
          return "lock";
      }
    },
    selectContainer(triggerNode) {
      return triggerNode.parentNode;
    },
  },
};
</script>

<style lang="less" scoped>
.procedure-detail-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  /deep/.ant-form-item {
    margin-bottom: 0;
    display: flex;
    .ant-form-item-label {
      width: 120px;
      flex-shrink: 0;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
      textarea {
        height: 80px;
      }
      .ant-calendar-picker {
        width: 100%;
      }
    }
  }
  //基本信息
  .baseInfo-container {
    padding: 0 40px 10px 30px;
    .unit-item {
      margin: 16px 0px 0 0;
      .subtitle {
        margin-bottom: 8px;
        font-weight: 400;
        color: #3759a0;
        font-size: 16px;
        &::before {
          content: attr(header);
          margin-right: 10px;
        }
      }
      .content {
        box-sizing: border-box;
        padding: 10px 40px 10px 0px;
        background: @layout-bg-color;
        .percent {
          display: flex;
          align-items: center;
        }
      }
    }
  }

  //工程信息
  .engineering-container {
    height: 326px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .operate {
      padding: 0 16px;
      margin-bottom: 14px;
      display: flex;
      /deep/.ant-input {
        margin-right: 10px;
        width: 160px;
      }
      /deep/.ant-select {
        margin-right: 10px;
        .ant-select-selection {
          &.ant-select-selection--single {
            width: 160px;
          }
          &.ant-select-selection--multiple {
            min-width: 160px;
          }
        }
      }
    }
    .content {
      flex: 1;
      display: flex;
      overflow: hidden;
      .tree-container {
        box-sizing: border-box;
        padding: 10px;
        width: 344px;
        height: 100%;
        border-right: 2px solid @border-color;
        overflow: auto;
        overflow-x: hidden !important;
        position: relative;
        /deep/.ant-tree {
          .folder-icon {
            color: #f5a623;
          }
          .file-icon {
            color: #54baff;
          }
          li {
            width: 100%;
            .ant-tree-node-content-wrapper {
              position: relative;
              width: calc(100% - 34px);
              .ant-tree-title {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: inline-block;
                max-width: calc(100% - 90px);
              }
            }
          }
        }
        /deep/.ant-empty {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .table-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding-left: 14px;
        .list {
          height: 100%;
          flex: 1;
          .status-text {
            border-radius: 4px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            font-size: 12px;
            &.normal {
              background: #4bc964;
            }
            &.lock {
              background: #ff7113;
            }
            &.cancel {
              background: #f1f2f7;
              color: #aab0bc;
            }
          }
        }
        .pager-container {
          flex-shrink: 0;
        }
      }
    }
  }
}
</style>
